<template>
  <div class="ordering">
    <div class="heading">菜品管理</div>
    <div class="buttonview">
      <router-link :to="{name: 'dishuplod'}">
        <el-button type="success">添加菜品</el-button>
      </router-link>
    </div>
    <div>
      <el-table :data="tabledata" style="width: 100%">
        <el-table-column
          prop="createdAt"
          label="创建时间"
          :formatter="formatTime"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="SoupName"
          label="类目"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="dishName"
          label="菜品名称"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column label="商品图片" align="center" class="custom-cell">
          <template #default="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.image"
              :preview-src-list="[scope.row.image]"
              :z-index="999"
              fit="cover"
            />
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          align="center"
          label="价格"
          min-width="100"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="100">
          <template #default="scope">
            <!-- 将自定义类名应用到单元格 -->
            <el-button
              size="small"
              type="primary"
              @click="Check_edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.isAvailable == true"
              size="small"
              type="danger"
              @click="Take_down(scope.row.dishName, scope.row.id, scope.$index)"
              >下架</el-button
            >
            <el-button size="small" type="danger" disabled v-else
              >已下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev,pager,next"
          :total="totalcount"
          :hide-on-single-page="false"
          @current-change="current_change"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs, onMounted, getCurrentInstance} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from "vue-router";
export default {
  setup() {
    const {proxy} = getCurrentInstance();
    const routers = useRouter();
    const dish_data = reactive({
      tabledata: [],
      totalcount: "",
      page: 1,
      isAvailable: null,
    });
    //编辑
    function Check_edit(indx, value) {
      const val = JSON.stringify(value);;

      routers.push({name: "dishuplod", query: {val:val
      }});
    }
    //下架
    function Take_down(name, id, index) {
      ElMessageBox.confirm(`确定对${name}下架么？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then((res) => {
          Shelf(id, index);
        })
        .catch((err) => {
          new proxy.$tips(err, "error").mess_age();
        });
    }
    //下架菜品
    async function Shelf(id, index) {
      try {
        const obj = {
          id: id,
        };

        const res = await new proxy.$request(
          proxy.$urls.m().ShelfFoodMenu,
          obj
        ).modePost();
        if (res.status == "200") {
          dish_data.tabledata[index].isAvailable = false;
          new proxy.$tips("下架成功").mess_age();
        }
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //
    onMounted(() => {
      getdishdata();
    });
    //获取菜品信息
    async function getdishdata() {
      try {
        const obj = {
          dishName: null,
          page: dish_data.page,
        };
        const res = await new proxy.$request(
          proxy.$urls.m().getfoodMenu,
          obj
        ).modePost();

        dish_data.tabledata = res.data.menuList;
        dish_data.totalcount = res.data.total;
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //分页
    function current_change(number) {
      dish_data.page = number;
      getdishdata();
    }
    //时间格式
    function formatTime(row, column) {
      // 使用 JavaScript 内置的 Date 对象将字符串日期转换为 Date 对象
      const date = new Date(row[column.property]);
      // 使用 toLocaleString 方法将日期格式化为所需的格式，例如中国的日期格式为 "yyyy-MM-dd HH:mm:ss"
      return date.toLocaleString("zh-CN", {timeZone: "Asia/Shanghai"});
    }

    return {
      ...toRefs(dish_data),
      Check_edit,
      Take_down,
      current_change,
      formatTime,
    };
  },
};
</script>

<style scoped="scoped">
.custom-cell {
  position: static !important;
}

.pagination-container {
  display: flex;
  justify-content: center; /* 将内容水平居中 */
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: rgb(18, 175, 18) !important;
  color: white;
}

::v-deep .el-table__cell {
  /* 添加您需要的样式 */
  position: static !important;
}
</style>
